<template>
 <validate-form @form-submit='Formsubmit'><!-- 这个事件不起作用 -->
    <label for="exampleInputEmail1">Email address</label>
 <validate-input :rules="EmailRuless" v-model='emailValue' placeholder='请输入邮箱地址' type='text' ></validate-input>
    <label for="exampleInputEmail2">password</label>
 <validate-input :rules="PasswordRules" v-model='passwordValue' placeholder='请输入密码' type='password' ></validate-input>
 <template #submit>

  </template>
</validate-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import 'bootstrap'
import { useStore } from 'vuex'
import ValidateInput, { EmailRules } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import { useRouter } from 'vue-router'
import createMessage from '../createMessage'
const EmailRuless: EmailRules[] = [
  {
    type: 'required',
    message: '输入不能为空'
  },
  {
    type: 'emailreg',
    message: '邮箱格式不符合规则'
  }
]
const PasswordRules: EmailRules[] = [
  {
    type: 'required',
    message: '密码不能为空'
  }
]

export default defineComponent({
  name: 'Login',
  components: {
    ValidateForm,
    ValidateInput
  },
  setup () {
    const useRouters = useRouter()
    const store = useStore()
    const emailValue = ref('')
    const passwordValue = ref('')
    const Formsubmit = (result: boolean) => {
      console.log(result)
      if (result) {
        const payload = {
          email: emailValue.value,
          password: passwordValue.value
        }
        store.dispatch('loginandfetch', payload).then(data => {
          createMessage('登录成功两秒后跳转至首页', 'success')
          setTimeout(() => {
            useRouters.push('/')
          }, 2000)
        }).catch(e => console.log(e))// 就是首先通过dispatch触发的函数返回是promsie所以可以通过这个then返回结果，也可以来捕获登录失败的结果。
      }
    }
    return {
      EmailRuless,
      emailValue,
      PasswordRules,
      passwordValue,
      Formsubmit
    }
  }
})

</script>

<style>

</style>
